<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
  <!-- 动态计算不同设备中根标签文字大小 -->
  <script src="./flexible.js"></script>
</head>
<body>

      <!-- 父容器 -->
      <div class="app">
          <!-- 顶部 -->
          <div class="topNav">
              <img src="./images/wx.png" alt="">
          </div>

          <!-- 广告区域 -->
          <div class="banner">
              <ul>
                 <li><img src="./uploads/banner_1.png" alt=""></li>
              </ul>
          </div>

          <!-- 活动标题区域 -->
          <div class="title">
              <h4>乐园活动</h4>
          </div>


          <!-- 活动区域 -->
          <div class="active_box">
              <!-- 顶部盒子 -->
              <div class="top_active">
                  <a href="#"><img src="./uploads/item_3.png" alt=""></a>
                  <!-- 进行中 -->
                  <span>进行中</span>

                  <!-- 收藏 -->
                  <strong class="iconfont icon-xihuan"></strong>
              </div>

              <!-- 活动秒杀 -->
              <div class="description  clearfix">
                  <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p>
                  <span>免费</span>
              </div>

              <!-- 底部文字 -->
              <div class="footer">
                  <span>
                      <i class="iconfont icon-icon-test"></i>
                      200人已报名
                  </span>
                  <span>
                        <i class="iconfont icon-icon-test"></i>
                        本周六开始
                  </span>
              </div>
          </div>


           <div class="active_box">
              <!-- 顶部盒子 -->
              <div class="top_active">
                  <a href="#"><img src="./uploads/item_3.png" alt=""></a>
                  <!-- 进行中 -->
                  <span>进行中</span>

                  <!-- 收藏 -->
                  <strong class="iconfont icon-xihuan"></strong>
              </div>

              <!-- 活动秒杀 -->
              <div class="description  clearfix">
                  <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p>
                  <span>免费</span>
              </div>

              <!-- 底部文字 -->
              <div class="footer">
                  <span>
                      <i class="iconfont icon-icon-test"></i>
                      200人已报名
                  </span>
                  <span>
                        <i class="iconfont icon-icon-test"></i>
                        本周六开始
                  </span>
              </div>
          </div>


           <div class="active_box  spec">
              <!-- 顶部盒子 -->
              <div class="top_active">
                  <a href="#"><img src="./uploads/item_3.png" alt=""></a>
                  <!-- 进行中 -->
                  <span>进行中</span>

                  <!-- 收藏 -->
                  <strong class="iconfont icon-xihuan"></strong>
              </div>

              <!-- 活动秒杀 -->
              <div class="description  clearfix">
                  <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p>
                  <span>免费</span>
              </div>

              <!-- 底部文字 -->
              <div class="footer">
                  <span>
                      <i class="iconfont icon-icon-test"></i>
                      200人已报名
                  </span>
                  <span>
                        <i class="iconfont icon-icon-test"></i>
                        本周六开始
                  </span>
              </div>
           </div>


          <!-- 底部导航区域 -->
          <div class="footer_box">
              <div class="item">
                  <span class="iconfont icon-shouye-zhihui"></span>
                  <a href="#">首页</a>
              </div>
              <div class="item">
                  <span class="iconfont icon-fenxiang"></span>
                  <a href="#">卡券</a>
              </div>
              <div class="item">
                   <span class="iconfont icon-user"></span>
                   <a href="#">我的</a>
              </div>
          </div>


      </div>
     
</body>
</html>